<template>
  <div>
    <el-steps
      :space="400"
      :active="active"
      style="width: 100%; margin: 30px"
    >
      <el-step title="商品基本信息" />
      <el-step title="添加库存信息" />
      <el-step title="添加移动端详情" />
    </el-steps>
    <!-- //步骤1 -->
    <el-form ref="ruleForm" :model="ruleForm.product" class="demo-ruleForm">
      <el-card v-show="active == 1" class="box-card" style="padding: 40px">

        <div slot="header" class="clearfix">
          <span>基本信息</span>
          <el-row :gutter="20">
            <el-col
              :span="6"
            ><el-form-item
              label="商品名称"
            ><el-input v-model="ruleForm.product.name" /> </el-form-item></el-col>
            <el-col :span="6">
              <el-form-item
                label="商品编码"
              ><el-input
                v-model="ruleForm.product.productSn"
                placeholder="商品编码"
              /></el-form-item></el-col>
            <el-col :span="6">
              <el-form-item label="商品分类">
                <el-select
                  v-model="ruleForm.product.productCategoryName"
                  placeholder="请选择"
                >
                  <el-option label="创意" value="创意" />
                  <el-option label="饰品" value="饰品" />
                  <el-option label="风格" value="风格" />
                  <el-option label="灯具" value="灯具" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="商品品牌">
                <el-select
                  v-model="ruleForm.product.brandName"
                  placeholder="请选择品牌"
                >
                  <el-option
                    label="家乐名品 (JLVP)"
                    value="1328964991345328130"
                  />
                  <el-option
                    label="东易日盛"
                    value="1328988221644832769"
                  />
                  <el-option
                    label="雷士照明"
                    value="1328990701308968962"
                  />
                  <el-option
                    label="圣剑"
                    value="1350061996314271745"
                  />
                  <el-option
                    label="的方式"
                    value="1369248191715856386"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="商品描述">
                <el-input
                  v-model="ruleForm.product.description"
                  type="textarea"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div slot="header" class="clearfix">
          <div
            style="padding: 20px; border-bottom: 2px solid #f5f5f5"
          >商品属性</div>
          <el-row :gutter="20" style="margin:20px 0">
            <el-col
              :span="8"
            >商品原价<el-input-number
              v-model="ruleForm.product.originalPrice"
              :min="1"
              :max="999"
              label="描述文字"
            /></el-col>
            <el-col
              :span="8"
            ><el-form-item label="促销类型">
              <el-select
                v-model="ruleForm.product.promotionType"
                :disabled="true"
                placeholder="请选择"
              >
                <el-option label="没有促销使用原价" :value="0" />
                <el-option label="使用促销价" :value="1" />
                <el-option label="使用会员价" :value="2" />
                <el-option label="使用阶梯价格" :value="3" />
                <el-option label="使用满减价格" :value="4" />
                <el-option label="限时购" :value="5" />
              </el-select>
            </el-form-item>
            </el-col>
            <el-col
              :span="8"
            ><el-form-item label="活动价格">
              <el-input-number v-model="ruleForm.product.promotionPrice" :disabled="true" :min="1" :max="99999" label="" />
            </el-form-item></el-col></el-row>
          <el-row :gutter="20">
            <el-col
              :span="6"
            >重量(kg)<el-input-number
              v-model="ruleForm.product.weight"
              :min="1"
              :max="999"
              label="描述文字"
            /></el-col>
          </el-row>
          <el-row :gutter="20" style="margin:20px 0">
            <el-col :span="6">
              <el-form-item label="审核状态">
                <el-switch
                  v-model="ruleForm.product.verifyStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否上架">
                <el-switch
                  v-model="ruleForm.product.publishStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin:20px 0">
            <el-col :span="12">
              <div class="grid-content bg-purple" style="height: 150px">
                添加图片
                <el-upload
                  class="upload-demo"
                  action="/lejuAdmin/material/uploadFileOssSave"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessAPI"
                >
                  <img
                    v-if="ruleForm.product.pic"
                    :src="ruleForm.product.pic"
                    class="avatar"
                    style="width: 150px; height: 150px"
                  >
                  <i
                    v-else
                    class="el-icon-plus avatar-uploader-icon"
                    style="width: 60px; height: 60px"
                  />
                </el-upload>
              </div>
            </el-col>
          </el-row>
        </div>
        <div slot="header" class="clearfix">
          <span>其他信息</span>
          <el-row :gutter="20" style="margin:20px 0">
            <el-col :span="6">
              <el-form-item label="推荐状态">
                <el-switch
                  v-model="ruleForm.product.recommendStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="新品状态">
                <el-switch
                  v-model="ruleForm.product.newStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预告商品">
                <el-switch
                  v-model="ruleForm.product.previewStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin:20px 0">
            <el-col
              :span="6"
            ><el-form-item label="搜索关键字">
              <el-input v-model="ruleForm.product.keywords" style="width:130px" /> </el-form-item></el-col>
            <el-col :span="8">
              库存预警<el-input-number
                v-model="ruleForm.product.lowStock"
                :min="1"
                :max="999"
                label="描述文字"
              /></el-col>
            <el-col :span="8">
              商品排序<el-input-number
                v-model="ruleForm.product.sort"
                :min="1"
                :max="999"
                label="描述文字"
              /></el-col>
          </el-row>
          <el-row :gutter="20" style="margin:20px 0">
            <el-col
              :span="12"
            >产品服务:<el-checkbox-group v-model="ruleForm.product.serviceIds">
              <el-checkbox label="无忧退货" />
              <el-checkbox label="快速退款" />
              <el-checkbox label="免费包邮" /> </el-checkbox-group></el-col>
          </el-row>
          <el-row :gutter="20" style="margin:20px 0">
            <el-col :span="4" :offset="10">
              <el-button
                type="primary"
                @click="pathone"
              >下一步,填写库存信息</el-button></el-col>
          </el-row>
        </div>

      </el-card></el-form></el-card>
    </el-form>
    <!-- 步骤2 -->
    <el-card v-show="active == 2" class="box-card">
      <el-form ref="ruleForm" :model="ruleForm.product" class="demo-ruleForm">
        <div slot="header" class="clearfix">
          <span>商品sku信息</span>
        </div>
        <el-row :gutter="20" style="margin:20px 0">
          <el-col
            :span="8"
            :offset="2"
          ><el-form-item
            label="标题"
          ><el-input v-model="ruleForm.product.detailTitle" /> </el-form-item></el-col>
          <el-col
            :span="8"
            :offset="2"
          ><el-form-item
            label="副标题"
          ><el-input v-model="ruleForm.product.detailDesc" /> </el-form-item></el-col>
        </el-row>
        <div style="width: 80%; margin: 15px auto">
          <span>画册图片</span>
          <el-upload
            action="/lejuAdmin/material/uploadFileOssSave"
            :headers="headers"
            list-type="picture-card"
            :limit="5"
            :file-list="fileList"
            :on-success="handleAvatarSuccessAPIs"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

          <el-checkbox-group v-model="colorcheck">
            <div v-if="colorlist.length > 0" class="list-size" style="display: flex ">
              颜色:

              <div
                v-for="(item, index) in colorlist"
                :key="index"
                style="margin-left:10px;"
              >
                <el-checkbox :label="item.name" />
                <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="delcor(index)" />
              </div>

            </div>
          </el-checkbox-group>
          <el-checkbox-group v-model="sizecheck">
            <div v-if="sizelist.length > 0" class="list-size" style=" display: flex">
              大小:

              <div
                v-for="(items, index) in sizelist"
                :key="index"
                style="margin-left:10px;"
              >
                <el-checkbox :label="items.name" />
                <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="delsize(index)" />
              </div>

            </div>
          </el-checkbox-group>
          <el-row :gutter="20">
            <el-col
              :span="3"
              style="height: 150px; margin-top: 30px"
            >sku设置</el-col>
            <el-col :span="5">
              <el-input
                v-model="color"
                style="margin-top: 30px"
                placeholder="颜色描述:比如土豪金"
              />
              <el-button
                type="primary"
                style="margin-top: 30px"
                plain
                @click="addcolor"
              >生成颜色选项</el-button>
            </el-col>
            <el-col :span="5">
              <el-input
                v-model="size"
                placeholder="大小"
                style="margin-top: 30px"
              />
              <el-button
                type="primary"
                plain
                style="margin-top: 30px"
                @click="addsize"
              >生成大小选项</el-button>
            </el-col>
            <el-col :span="4" :offset="7">
              <el-button
                type="primary"
                style="margin-top: 30px"
                @click="addskulist"
              >生成sku列表</el-button>
              <el-button
                type="primary"
                style="margin-top: 30px"
                @click="addsku"
              >新增空白sku</el-button>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <el-table
        v-if="ruleForm.pmsSkuStockList.length>0"
        :data="ruleForm.pmsSkuStockList"
        border
        height="250"
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          label="序列"
          width="50"
        />
        <el-table-column
          prop="pic"
          label="图片"
          width="120"
        >
          <template slot-scope="scope">
            <div class="grid-content bg-purple" style="height: 150px">
              添加图片
              <el-upload
                class="upload-demo"
                action="/lejuAdmin/material/uploadFileOssSave"
                :headers="headers"
                :show-file-list="false"
                :on-success="handleAvatarSuccessSKU"
              >
                <img
                  v-if="scope.row.pic"
                  :src="scope.row.pic"
                  class="avatar"
                  style="width: 100px; height: 100px"
                >
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                  style="width: 60px; height: 60px"
                  @click="seletkrow(scope.row)"
                />
              </el-upload>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="color"
          label="颜色"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.color" placeholder="请输入颜色" clearable />
          </template>
        </el-table-column>

        <el-table-column
          prop="size"
          label="大小"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.size" placeholder="请输入大小" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="stock"
          label="库存"
          width="300"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.stock" placeholder="请输入库存" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="lowStock"
          label="预警库存"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.lowStock" placeholder="预警库存" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="lockStock"
          label="锁定库存"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.lockStock" placeholder="锁定库存" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="skuCode"
          label="sku编码"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.skuCode" placeholder="sku编码" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" placeholder="请输入价格" clearable />
          </template>
        </el-table-column>
        <el-table-column
          prop="sale"
          label="销量"
          width="120"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.sale" placeholder="销量" clearable />
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" style="color:red;" @click="delrow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="twobtn"><el-button @click="active=1">返回上一步</el-button> <el-button type="primary" @click="active=3">下一步,填写移动端详情</el-button></div>

    </el-card>
    <!-- 步骤3 -->
    <el-card v-show="active == 3" class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <el-upload
          class="upload-demo"
          action="/lejuAdmin/material/uploadFileOss"
          :headers="headers"
          :on-success="tinImage"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          <div v-if="fileUrl!=''">
            <img :src="fileUrl" alt="">
          </div>
        </el-upload>
        <Tinymce ref="Tin" />
      </div>
      <div style="width:80%;">
        <span>备注：</span>
        <el-input
          v-model="ruleForm.product.note"
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
        />
      </div>
      <div class="twobtn"><el-button @click="active=2">返回上一步</el-button> <el-button v-if="isshow" type="primary" @click="sbolmit">提交</el-button>
        <el-button v-else type="primary" @click="alter">修改</el-button></div>
    </el-card>

  </div>
</template>
<script >
import {
  addProductAndSkus,
  updateProductAndSkus,
  productSkusDetail
} from '@/api/product/index'
import { getToken } from '@/utils/myAuth'
import Tinymce from '@/components/Tinymce'
export default {
  components: { Tinymce },
  data() {
    return {
      sbmit: false,
      fileUrl: '',
      color: '',
      size: '',
      colorcheck: [],
      sizecheck: [],
      colorlist: [],
      sizelist: [],
      checkList: [],
      active: 1,
      ruleForm: {
        pmsSkuStockList: [], // sku
        product: {
          albumPics: [],
          name: '', // 商品名称
          productSn: '', // 商品编码
          productCategoryName: '', // 商品分类
          brandName: '', // 品牌
          description: '', // 商品描述
          originalPrice: '', // 原价
          promotionType: 0, // 促销类型
          promotionPrice: '', // 活动价格
          weight: '', // 重量
          verifyStatus: 0, // 审核状态0->未审核；1->审核通过 ,
          publishStatus: 0, // 是否上架
          pic: '', // 缩略图
          recommendStatus: 0, // 推荐状态
          detailMobileHtml: '', // 页面html
          newStatus: 0, // 新品状态
          previewStatus: '', // 预告商品
          keywords: '', // 搜索关键词
          lowStock: '', // 库存预警
          sort: '', // 商品排序
          serviceIds: [], // 产品服务
          detailTitle: '', // 标题
          detailDesc: '', // 副标题
          note: ''
        }
      },
      edfm: [],
      dialogImageUrl: '',
      dialogVisible: false,
      phtotolis: '',
      currentrow: '',
      isshow: true,
      fileList: []
    }
  },

  computed: {
    headers() {
      return { token: getToken() }
    }
  },
  created() {
    var _this = this
    var id = this.$route.query.id
    if (id == undefined || id == '') {
      return
    } else {
      this.isshow = false
      productSkusDetail(id).then((res) => {
        console.log(res)
        if (res.success) {
          // _this.fileList =
          var imgArr = res.data.product.albumPics.split(',')
          imgArr.forEach((item) => {
            this.fileList.push({
              url: item
            })
          })

          // console.log(res.data.product.albumPics.split(','))
          _this.$refs.Tin.setContent(res.data.product.detailMobileHtml)
          res.data.skus.forEach((el) => {
            var errs = JSON.parse(el.spData)
            if (errs != null || errs != '') {
              el.color = errs[0].value
              el.size = errs[1].value
            }
          })
          _this.ruleForm.product = res.data.product
          _this.ruleForm.pmsSkuStockList = res.data.skus
          _this.ruleForm.product.serviceIds = _this.ruleForm.product.serviceIds.split(
            ','
          )
          console.log(_this.ruleForm.product.serviceIds)
          var qment = []
          _this.ruleForm.product.serviceIds.forEach((el) => {
            if (el == '1') {
              qment.push('无忧退货')
            } else if (el == '2') {
              qment.push('快速退款')
            } else if (el == '3') {
              qment.push('免费包邮')
            }
          })
          console.log(qment)
          _this.ruleForm.product.serviceIds = qment
        }
      })
    }
    // _this.$refs.Tin.setContent(_this.ruleForm.detailMobileHtml)
    // this.list.content1=this.$refs.Tin.getContent()
  },
  mounted() {},
  methods: {
    // 新增空白sku'
    addsku() {
      var obj = {
        pic: '', // 图片
        color: '', // 颜色
        size: '', // 大小
        stock: '', // 库存
        lowStock: '', // 预警库存
        lockStock: '', // 锁定库存
        skuCode: '16510', // sku编码
        price: '', // 价格
        sale: '' // 销量
      }
      this.ruleForm.pmsSkuStockList.push(obj)
    },
    // 删除sku
    delrow(row) {
      var index = this.ruleForm.pmsSkuStockList.findIndex((el) => {
        return el.color === row.color && el.size === row.size
      })
      this.ruleForm.pmsSkuStockList.splice(index, 1)
    },
    // 获得sku行内id
    seletkrow(row) {
      var index = this.ruleForm.pmsSkuStockList.findIndex((el) => {
        return el.color === row.color && el.size === row.size
      })
      this.currentrow = index
      console.log(this.currentrow)
    },
    // 删除颜色
    delcor(index) {
      this.colorlist.splice(index, 1)
    },
    delsize(index) {
      this.sizelist.splice(index, 1)
    },
    // 生成sku列表
    addskulist() {
      if (this.colorcheck.length === 0 || this.sizecheck.length === 0) {
        this.$message.error('请选择数据')
      } else {
        var arr = [this.colorcheck, this.sizecheck]
        console.log(arr)
        var lastarr = arr.reduce((total, current) => {
          var newarr = []
          total.forEach((item) => {
            current.forEach((inner) => {
              if (typeof item === 'object') {
                newarr.push([...item, inner])
              } else {
                newarr.push([item, inner])
              }
            })
          })
          return newarr
        })
        console.log(lastarr)
        this.filterSkuArr(lastarr)
        this.$message.success('生成成功')
        this.sbmit = true
      }
    },
    // 生成颜色选项
    addcolor() {
      if (this.color != '') {
        var cor = { name: this.color, checked: false }
        this.colorlist.push(cor)
      } else {
        return
      }
    },
    addsize() {
      if (this.size != '') {
        var cor = { name: this.size, checked: false }
        this.sizelist.push(cor)
      } else {
        return
      }
    },
    // 库存列表
    pathone() {
      this.active = 2
    },
    handleAvatarSuccessAPI(res, file) {
      this.ruleForm.product.pic = URL.createObjectURL(file.raw)
      console.log(this.ruleForm.pic)
    },
    // sku照片上传
    handleAvatarSuccessSKU(res, file) {
      this.ruleForm.pmsSkuStockList[this.currentrow].pic = URL.createObjectURL(
        file.raw
      )
      console.log(this.ruleForm.pmsSkuStockList[this.currentrow].pic)
    },
    handleAvatarSuccessAPIs(res, file, fileList) {
      var _this = this
      console.log(fileList)
      var arr = []
      fileList.forEach(el => {
        if (el.name == null || el.name == undefined || el.name == '') {
          arr.push(el.url)
        } else {
          arr.push(el.response.data.material.ossUrl)
        }
        _this.ruleForm.product.albumPics = arr.toString()
        console.log(_this.ruleForm.product.albumPics, '1111111')
      })
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      console.log(file.url)
      console.log(this.ruleForm.product.albumPics)
      console.log(this.fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.ruleForm.product.albumPics += file.url
      console.log(this.ruleForm.albumPics)
      this.dialogVisible = true
    },
    filterSkuArr(newArr) {
      this.ruleForm.pmsSkuStockList = []
      newArr.forEach((item) => {
        var skuStock = {
          pic: '', // 图片
          color: item[0], // 颜色
          size: item[1], // 大小
          stock: '', // 库存
          lowStock: '', // 预警库存
          lockStock: '', // 锁定库存
          skuCode: '16510', // sku编码
          price: '', // 价格
          sale: '', // 销量
          spData: ''
        }
        this.ruleForm.pmsSkuStockList.push(skuStock)
      })
      console.log(this.ruleForm.pmsSkuStockList)
    },
    tinImage(res, file) {
      if (res.success) {
        // 插入图片
        this.$refs.Tin.imageSuccessCBK(res.data.fileUrl)
        this.$refs.tinUpload.clearFiles()
      } else {
        this.$message.error('上传失败')
      }
    },
    // 提交
    sbolmit() {
      this.ruleForm.product.detailMobileHtml = this.$refs.Tin.getContent()
      this.ruleForm.pmsSkuStockList.forEach((el) => {
        if (el.spData == '' || el.spData == undefined) {
          var skulist = [
            { key: '颜色', value: el.color },
            { key: '大小', value: el.size }
          ]
          skulist = JSON.stringify(skulist)
          el.spData = skulist
        }
      })
      console.log(this.ruleForm)
      this.ruleForm.product.serviceIds = this.ruleForm.product.serviceIds.toString()
      addProductAndSkus(this.ruleForm).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message.success('新增成功')
        }
      })
    },
    alter() {
      this.ruleForm.product.detailMobileHtml = this.$refs.Tin.getContent()
      this.ruleForm.pmsSkuStockList.forEach((el) => {
        if (el.spData == '' || el.spData == undefined) {
          var skulist = [
            { key: '颜色', value: el.color },
            { key: '大小', value: el.size }
          ]
          skulist = JSON.stringify(skulist)
          el.spData = skulist
        }
      })
      this.ruleForm.product.serviceIds.forEach((el) => {
        if (el == '无忧退货') {
          el = '1'
        } else if (el == '快速退款') {
          el = '2'
        } else if (el == '免费包邮') {
          el = '3'
        }
      })
      this.ruleForm.product.serviceIds = this.ruleForm.product.serviceIds.toString()
      //  var scs = this.ruleForm.pmsSkuStockList.spData.toString()
      //  this.ruleForm.pmsSkuStockList.spData = scs
      console.log(this.ruleForm)
      updateProductAndSkus(this.ruleForm).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message.success('修改成功')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: 30px;
}
.twobtn {
  width: 100%;
  height: 40px;
  margin: 30px 0;
  display: flex;
  justify-content: center;
}
.list-size {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
